<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header('文件配置')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="col-sm-12">
        <div class="tabs-container">
            <ul class="nav nav-tabs" id="oss-title">
                <li class="active"><a data-toggle="tab" href="#tab-local" aria-expanded="true"> 本地存储</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-qiniu" aria-expanded="false">七牛云存储</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-common" aria-expanded="false">通用配置</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab-local" class="tab-pane active">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-local">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">域名：</label>
                            <div class="col-sm-8">
                                <input class="form-control" name="oly.oss.native.domain" type="text"  th:value="${ossConfig['oly.oss.native.domain']}">
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <div id="tab-qiniu" class="tab-pane">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-qiniu">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">域名：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text"  name="oly.oss.qiniu.domain" th:value="${ossConfig['oly.oss.qiniu.domain']}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">AccessKey：</label>
                                <div class="col-sm-8">
                                    <input   class="form-control" type="text" name="oly.oss.qiniu.access.key" th:value="${ossConfig['oly.oss.qiniu.access.key']}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">SecretKey：</label>
                                <div class="col-sm-8">
                                    <input   class="form-control" type="text" name="oly.oss.qiniu.secret.key" th:value="${ossConfig['oly.oss.qiniu.secret.key']}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">空间名：</label>
                                <div class="col-sm-8">
                                    <input   class="form-control" type="text" name="oly.oss.qiniu.bucket" th:value="${ossConfig['oly.oss.qiniu.bucket']}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">机房：</label>
                                <div class="col-sm-8">
                                    <input   class="form-control" type="text" name="oly.oss.qiniu.zone" th:value="${ossConfig['oly.oss.qiniu.zone']}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">缩略图规则：</label>
                                <div class="col-sm-8">
                                    <input   class="form-control" type="text" name="oly.oss.qiniu.style.rule" th:value="${ossConfig['oly.oss.qiniu.style.rule']}">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="tab-common" class="tab-pane">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-common">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">路径中文转换：</label>
                            <div class="col-sm-8">
                                <label class="toggle-switch switch-solid">
                                    <input type="checkbox" id="oly.oss.zh.py" th:checked="${ossConfig['oly.oss.zh.py'] == 'true' ? true : false}">
                                    <input type="hidden" name="oly.oss.zh.py" th:value="${ossConfig['oly.oss.zh.py'] == 'true' ? true : false}">
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">文件大小限制：</label>
                            <div class="col-sm-8">
                                <input class="form-control" name="oly.oss.max.size" type="number"  th:value="${ossConfig['oly.oss.max.size']}">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>单位KB,最大允许<span th:text="${maxSize}"></span></span>
                            </div>
                        </div>
                         <div class="form-group">
                            <label class="col-sm-3 control-label">文件长度限制：</label>
                            <div class="col-sm-8">
                                <input class="form-control" name="oly.oss.max.length" type="number"  th:value="${ossConfig['oly.oss.max.length']}" >
                            </div>
                         </div>
                         <div class="form-group">
                            <label class="col-sm-3 control-label">文件类型限制：</label>
                            <div class="col-sm-8">
                                <select id="oly.oss.support.type" class="form-control select2-multiple" multiple th:with="types=${T(com.ruoyi.common.utils.file.MimeExtensionEnum).getExtensions()}">
                                    <option th:each="type:${types}" th:value="${type}" th:text="${type}" th:selected="${ossConfig['oly.oss.support.type']==type}"></option>
                                </select>
                            </div>
                         </div>
                        </form>
                    </div>
                </div>

        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<th:block th:include="include :: select2-js" />
<script>
    var prefix = ctx + "oly/oss";
    var myForm="form-local";
    $(function() {
            $('#oly.oss.support.type').select2({
                placeholder: "请选择文件类型",
                allowClear: true
            });
        })
    $('#oss-title a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
       myForm= $(this).attr('href').replace("#tab-","form-");
    });
    function setOpen() {
            $("input[name='oly.oss.zh.py']").val($("input[id='oly.oss.zh.py']").is(':checked'));
        }
    function submitHandler() {
            setOpen();
            var data = $("#"+myForm).serializeArray();
            var types = $.form.selectSelects("oly.oss.support.type");
	        	data.push({"name": "oly.oss.support.type", "value": types});
             if ($.validate.form()) {
               $.operate.save(prefix + "/updateByGk", data,function(){
                $.modal.closeAll();
                $.modal.msgSuccess("配置已修改");
               });
            }
    }
</script>
</body>
</html>
